<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 15:30:49
 * @LastEditTime : 2021-09-10 10:20:02
 * @FilePath     : /newhope/src/page/game/index.vue
 * @Description  : 游戏
-->

<script setup lang="ts">
import { PageQuery } from "/@/hooks/query";
import { ref } from "vue";
import {
  WindBlowsTheFragranceOfRice,
  HappyReunion,
  InterperDream,
  PolarResearch,
} from "/@/components/index";
import { useQuery } from "/@/hooks/query";
import { useBus } from "/@/hooks/bus";
import { useStore } from 'vuex'
const store = useStore()

const show = ref(Math.floor((Math.random()) * 4))
if (!store.state.user.sceneInit)
  store.commit('user/editScene', show)
const game = ref<null | HTMLElement>(null);
export type PageProps = PageQuery<{
  message: "1" | "2";
}>;

const bus = useBus();
const [query] = useQuery<PageProps>();

async function print() { }
</script>
<template>
  <div ref="game" class="game" @click="print">
    <PolarResearch v-if="store.state.user.scene === 0" :status="parseInt(query.message)" />
    <HappyReunion v-if="store.state.user.scene === 1" :status="parseInt(query.message)" />
    <InterperDream v-if="store.state.user.scene === 2" :status="parseInt(query.message)" />
    <WindBlowsTheFragranceOfRice
      v-if="store.state.user.scene === 3"
      :status="parseInt(query.message)"
    />
  </div>
</template>
<style lang="scss" scoped>
.game {
  height: 100%;
  width: 100%;
  background: url("../../assets/images/gameBkg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  user-select: none;
}
</style>
